<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"></script>

    <link href="css/userInfo.css" rel="stylesheet">


    <title>奶茶店后台</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand" href="/main.html">奶茶店后台</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/order.html">订单管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/users.html">用户管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/product.html">商品管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/productSort.html">商品分类管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/activity.html">活动管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/userInfo.html">个人中心</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="userInfo d-flex flex-md-column justify-content-center align-items-center">

    <div class="alert alert-danger position-absolute w-25 text-center" role="alert" id="alert" style="top: 100px; z-index: 1055;" hidden>
       正在登出
    </div>


    <div class="position-relative">
        <img class="avatar shadow mt-5 mb-4" src="img/IMG_1560.JPG" width="250" height="250" id="avatar"/>
    </div>

    <div class="info-holder d-flex flex-column align-items-center" style="">
        <button class="btn btn-secondary w-50 mb-4" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-fill" viewBox="0 0 16 16">
                <path d="M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"></path>
                <path fill-rule="evenodd" d="M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"></path>
            </svg>
            更改头像
        </button>

        <div class="input-group mb-4 shadow-sm">
            <span class="input-group-text">用户名</span>
            <input type="text" aria-label="First name" class="form-control p-md-2" id="name">
        </div>
        <div class="input-group mb-4  shadow-sm">
            <span class="input-group-text">账号</span>
            <input type="text" aria-label="First name" class="form-control p-md-2"  value="username@qq.com" id="account" disabled>
        </div>
        <div class="input-group mb-4  shadow-sm">
            <span class="input-group-text">身份</span>
            <input type="text" aria-label="First name" class="form-control p-md-2" value="用户" id="identity" disabled>
        </div>

        <button type="button" class="btn btn-primary w-50 mb-3" onclick="editUser()">修改</button>
        <button type="button" class="btn btn-secondary w-50" onclick="logout()">登出</button>

    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header ">
                <h5 class="modal-title" id="exampleModalLabel">上传头像</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body d-flex flex-column align-items-center p-lg-5">
                <img class="avatar-preview shadow-sm mb-5" src="img/camera.png" width="130" height="130">


                <form action="http://127.0.0.1:8080/api/upload" enctype="multipart/form-data">
                    <div class="input-group mb-3 w-100">
                        <label class="input-group-text" for="uploadAvatar">上传</label>
                        <input type="file" class="form-control" id="uploadAvatar">
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="js/general.js"></script>
<script src="js/userInfo.js"></script>
<script>
    getUserInfo();
</script>
</body>
</html>
